<template>
  <div>
    <div>
      <search-form
        ref="searchBar"
        :search-config="searchConfig"
        :label-width="120"
        @clear="clearSearch"
        @search="handleSearch"
      />
    </div>
    <div>
      <table-box
        ref="unitOfficeTable"
        show-index
        show-selection
        :selected-arry.sync="tableSelected"
        :table-config="tableConfig"
        :other-filters="otherFilters"
        @btnOperate="btnOperate"
        @selection-change="selectionChangeHandle"
      />
    </div>
    <div>
      <import-files v-if="importVisible" title="导入" :visible.sync="importVisible" :config="fileImportConfig" @success="handleImportSuccess" />
      <export-files v-if="exportVisible" title="导出" :config="exportConfig" :visible.sync="exportVisible" @success="handleExportSuccess" />
    </div>
    <add-unit-office v-if="showEditDlg" ref="editDlg" :visible.sync="showEditDlg" :detail-data="activatedData" @success="refreshTable" />
  </div>
</template>

<script>
import addUnitOffice from './component/addUnitOffice.vue'
import { updateUnitOffice } from '@/api/constructionUnitMng'

export default {
  name: '',
  components: { addUnitOffice },
  data() {
    return {
      exportVisible: false,
      importVisible: false,
      flag: '',
      showEditDlg: false,
      activatedData: {},
      tableData: [],
      searchConfig: [
        {
          label: '施工单位',
          prop: 'unitCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'get',
            remoteUrl: `${process.env.VUE_APP_BASE_API}/api/v1/configConstUnit/page`,
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'unitName',
              value: 'unitCode'
            },
            selectData: []
          },
          dialogConfig: {
            title: '施工单位',
            interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configConstUnit/page`,
            setting: [{ prop: 'unitCode', title: '编码' }, { prop: 'unitName', title: '名称' }],
            pageFlag: true
          }
        },
        {
          label: '办事处',
          prop: 'officeCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'get',
            remoteUrl: '/select-service/api/v1/organization/page',
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: []
          },
          dialogConfig: {
            title: '办事处',
            interfacePath: '/select-service/api/v1/organization/page',
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            filtersRaw: [{ 'id': 'isOffice', 'property': 'isOffice', 'value': '1', 'operator': '=' }],
            pageFlag: true
          }
        },
        {
          label: '启用状态',
          prop: 'enable',
          type: 'radio',
          value: '1',
          placeholder: '',
          config: {
            selectData: [
              { label: '全部', value: '' },
              { label: '启用', value: '1' },
              { label: '停用', value: '0' }
            ]
          }
        }
      ],
      tableSelected: [],
      otherFilters: [{ 'id': 'enable', 'property': 'enable', 'operator': '=', 'value': '1' }],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/constUnitAndOffice/page`,
        hideSearchBar: true,
        setting: [
          {
            prop: 'unitName',
            label: '施工单位'
          },
          {
            prop: 'principal',
            label: '负责人'
          },
          {
            prop: 'principalPhone',
            label: '负责人电话'
          },
          {
            prop: 'officeCode',
            label: '办事处编码'
          },
          {
            prop: 'officeName',
            label: '办事处名称'
          },
          {
            prop: 'enable',
            label: '启用状态',
            render: (creat, row) => {
              if (row.enable) {
                return <span>启用</span>
              } else {
                return <span>停用</span>
              }
            }
          }
        ],
        btnList: this.isProduction ? null : [
          {
            buttonName: '新增',
            optCode: 'add',
            outerFlag: true
          },
          {
            buttonName: '停用',
            optCode: 'unable',
            outerFlag: true
          },
          {
            buttonName: '启用',
            optCode: 'enable',
            outerFlag: true
          },
          {
            buttonName: '导入',
            optCode: 'import',
            outerFlag: true
          },
          {
            buttonName: '导出',
            optCode: 'export',
            outerFlag: true
          }
        ]
      }
    }
  },
  computed: {
    exportConfig() {
      return [{
        code: 'export',
        name: '施工单位与办事处关系',
        dataMethod: 'post',
        dataApi: `/slm-admin/api/v1/constUnitAndOffice/export?type=0`,
        selectedRows: this.tableSelected,
        paramsRaw: {},
        filtersRaw: this.otherFilters,
        queryField: 'id'
      },
      {
        code: 'exportTemplate',
        name: '施工单位与办事处关系模板',
        async: false,
        templateMethod: 'post',
        templateApi: `/slm-admin/api/v1/constUnitAndOffice/export?type=1`
      }]
    },
    fileImportConfig() {
      return [{
        code: 'importNew',
        name: '新增施工单位与办事处关系',
        async: false,
        apiUrl: `/slm-admin/api/v1/constUnitAndOffice/importExcel?type=1`
      },
      {
        code: 'importUpdate',
        name: '修改施工单位与办事处关系',
        async: false,
        apiUrl: `/slm-admin/api/v1/constUnitAndOffice/importExcel?type=0`
      }]
    }
  },
  created() {},
  activated() {},
  methods: {
    // 按钮组
    btnOperate(flag) {
      switch (flag) {
        case 'add':
          this.addSerise()
          break
        case 'unable':
          this.handleChangeStatus(0)
          break
        case 'enable':
          this.handleChangeStatus(1)
          break
        case 'export':// 导出
          this.exportVisible = true
          break
        case 'import':// 导入
          this.importVisible = true
          break
        default:
          break
      }
    },
    // 搜索
    handleSearch(data) {
      this.otherFilters = [...data.filtersRaw]
      this.$nextTick(() => {
        this.$refs.unitOfficeTable.initTableData()
      })
    },
    clearSearch() {},
    // 选中行
    selectionChangeHandle(rows) {
      this.tableSelected = rows
    },
    // 启用:1/停用:0  state停启用状态
    handleChangeStatus(state) {
      if (!this.tableSelected.length) {
        this.$message.warning(`请选择【${state ? '启用' : '停用'}】项`)
        return
      }
      const tmpArr = this.tableSelected.filter(row => row.enable === state)
      if (tmpArr.length > 0) {
        this.$message.warning(`当前所选分类包含${state ? '启用' : '停用'}状态，请勿重复操作`)
        return
      }
      this.$confirm(`此操作将当前所选数据${state ? '启用' : '停用'},是否继续`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableSelected.forEach(item => {
          item.enable = state
        })
        updateUnitOffice(this.tableSelected).then(res => {
          if (res.success === 1) {
            this.$message({
              message: res.msg || '操作成功',
              type: 'success'
            })
            this.refreshTable()
          }
        })
      })
    },
    addSerise() {
      this.showEditDlg = true
    },
    // 刷新
    refreshTable(isInit) {
      this.$refs.unitOfficeTable.initTableData(isInit ? '' : 'onPage')
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-group{
  display: flex;
}
</style>
